<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联元素的盒模型</title>
    <style type="text/css">
        /*
            盒子模型：内容区、内边距、边框、外边距
        */

        .s1 {
            background-color: chartreuse;

            /*
                内联元素不能设置内容区的高度和宽度，因为设置了也不起作用
            */
            width: 100px;
            height: 100px;

            /*
                内联元素可以设置水平方向的内边距，会起作用的，同时还会影响页面布局
            */
            padding-left: 100px;
            padding-right: 100px;

            /*
                内联元素可以设置垂直方向的内边距，但是不会影响页面布局，仅仅会对显示效果有影响，这里的背景颜色就是很好的例子
            */
            padding-top: 50px;
            padding-bottom: 50px;

            /*
                内联元素可以设置边框，但是垂直的边框不会影响到页面的布局，水平方向会影响页面布局
            */
            border: 10px solid blue;

            /*
                内联元素支持水平方向的外边距，相邻的水平方向的外边距不会重叠，而是求和
            */
            margin-left: 100px;
            margin-right: 100px;

            /*
                内联元素不支持垂直外边距
            */
            margin-top: 200px;
            margin-bottom: 200px;
        }

        .s2{
           /*
                为右边的元素设置一个左外边距，结果证明水平方向相邻的外边距不会重叠，而是求和。
           */
            margin-left: 100px;
        }
        .box1{
            background-color: red;
            width: 100px;
            height: 100px;

        }
    </style>
</head>
<body>
    <span class="s1">我是一个span</span>
    <span class="s2">我是一个span</span>
    <div class="box1"></div>
</body>
</html>